<!-- 活动断层与探察成果分类检索 -->
<template>
  <div id="searchMap-map" style="width:100%;height:100%;"></div>
  <div id="searchMap-mapDiv" class="ol-popup">
    <!-- 显示控件 -->
    <div id="searchMap-setDivPosition" class="init-setDivPosition">
      <!-- 切换卫星和街道地图 -->
      <p @click="switchMap" class="init-setDivPosition-selected">
        <template v-if="switchMapBool == false">
          <img src="@/assets/map/image/weixing-b.png" title="切换卫星地图"><br /><span>卫星图</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/jiedao-b.png" title="切换街道地图"><br /><span>街道图</span>
        </template>
      </p>
      <!-- 返回主界面 -->
      <p @click="zoomDefaultPosition" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool == true }">
        <img src="@/assets/map/image/newImage/home.png" title="返回主界面"><br /><span>主界面</span>
      </p>
      <!-- 显示工具箱 -->
      <p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox == false }">
        <template v-if="showHideToolsBox">
          <img src="@/assets/map/image/tools.png" title="打开工具箱"><br /><span style="border:0;">工具箱</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/tools.png" title="关闭工具箱"><br /><span style="border:0;">工具箱</span>
        </template>
      </p>
    </div>
    <!-- 工具箱 -->
    <div id="searchMap-ToolsBoxDiv" class="init-ToolsBoxDiv">
      <p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool == false }">
        <template v-if="showHideMeasureTool">
          <img title="开启测量工具" src="@/assets/map/image/cel.png"><br /><span>测量</span>
        </template>
        <template v-else>
          <img title="关闭测量工具" src="@/assets/map/image/cel.png"><br /><span>测量</span>
        </template>
      </p>
      <p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool == false }">
        <template v-if="showHidePositionTool">
          <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br /><span style="border:0;">定位</span>
        </template>
        <template v-else>
          <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br /><span style="border:0;">定位</span>
        </template>
      </p>
    </div>
    <!-- 所有工具 -->
    <div id="searchMap-AllToolsDiv" class="init-AllToolsDiv">
      <!-- 测量工具 -->
      <div id="searchMap-MeasureToolsDiv" class="init-AllToolsDivFloat">
        <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool == false }">
          <template v-if="measureDistanceBool">
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br /><span>测量距离</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br /><span>测量距离</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool == false }">
          <template v-if="measureAreaBool">
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br /><span>测量面积</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br /><span>测量面积</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool == false }">
          <template v-if="stopMeasureBool">
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br /><span>结束测量</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br /><span>结束测量</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool == false }">
          <template v-if="clearMeasureBool">
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br /><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br /><span>清空结果</span>
          </template>
        </p>
      </div>
      <!-- 定位工具 -->
      <div id="searchMap-MousePositionDiv">
        <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
        <input id="searchMap-MousePositionLon" type="text" value="">
        <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
        <input id="searchMap-MousePositionLat" type="text" value="">
        <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool == false }">
          <template v-if="clearPositionBool">
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br /><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br /><span>清空结果</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool == false }">
          <template v-if="addPositionBool">
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br /><span>添加定位点</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br /><span>添加定位点</span>
          </template>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/map/ol/ol.css';
// import { getProjection, getWMTSLayer, getRESTLayer, getResolutions } from "@/map/projMap.js";
import { getProjection, getWMTSLayer, getRESTLayer, getResolutions } from "./projMap.js";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorLayer from 'ol/layer/Vector';
import { Cluster, Vector as VectorSource, XYZ } from 'ol/source'
import WMTS from 'ol/source/WMTS';
import { getWidth, getTopLeft } from 'ol/extent';
import { Control, defaults as defaultControls } from 'ol/control';
import GeoJSON from 'ol/format/GeoJSON';
import WKT from 'ol/format/WKT';
import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';
import { Fill, Stroke, Style, Icon, Circle, Text } from 'ol/style';
import { Select, Draw, Modify, Snap, Translate } from 'ol/interaction';
import { getArea, getLength } from 'ol/sphere';
import { unByKey } from 'ol/Observable';
import * as olExtent from 'ol/extent';
import { createBox } from 'ol/interaction/Draw';
import { boundingExtent } from 'ol/extent';
import {
  TileSuperMapRest, Logo,
  QueryService, QueryBySQLParameters, QueryByBoundsParameters, QueryByGeometryParameters, QueryByDistanceParameters,
  FeatureService, GetFeaturesByIDsParameters, GetFeaturesBySQLParameters, GetFeaturesByBoundsParameters,
  GetFeaturesByGeometryParameters, GetFeaturesByBufferParameters,
  MapService, ThemeDotDensity, ServerStyle, ThemeParameters, ThemeService,
  ThemeGraduatedSymbol, ThemeGraduatedSymbolStyle, GraduatedMode, ServerColor,
  ThemeGraph, ThemeGraphItem, ThemeGraphAxes, ThemeGraphSize, ThemeGraphText, ThemeGraphTextFormat,
  ServerTextStyle, ThemeGraphType, ThemeLabel, ThemeLabelItem, LabelThemeCell, ThemeLabelBackground,
  ThemeRange, ThemeRangeItem, RangeMode, ThemeUnique, ThemeUniqueItem,
  ThemeGridRange, ThemeGridRangeItem, ThemeGridUnique, ThemeGridUniqueItem,
  LayerStatus, SetLayerStatusParameters
} from '@supermap/iclient-ol';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';

export default {
  name: "SearchMap",
  components: {

  },
  props: {
    allListData: {//全部查询结果列表
      type: Array,
      required: true,
      default: []
    },
  },
  emits: ["getDetailListByCode"],
  data() {
    return {
      str: "searchMap",
      map: null,
      projection4490: null,
      url: "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326",//中国地图
      center: [105, 34],
      zoom: 4,
      mapLoadingBool: false,//是否正在查询参数
      zoomDefaultPositionBool: true,//显示主界面
      switchMapBool: false,//切换地图
      layer1: null,//天地图街道图
      layer2: null,
      layer3: null,//天地图卫星图
      layer4: null,
      draw: null,//矢量绘制
      snap: null,
      select: null,
      modify: null,
      drag: null,
      source: null,//矢量绘制图层数据
      measureSource: null,//测量结果图层数据
      measure: null,//测量工具
      sketch: null,
      helpTooltipElement: null,
      helpTooltip: null,
      measureTooltipElement: null,
      measureTooltip: null,
      measureTooltipArray: [],//全部测量结果Overlay数组
      showHideMeasureTool: true,//显示|隐藏测量工具
      measureDistanceBool: true,
      measureAreaBool: true,
      stopMeasureBool: true,
      clearMeasureBool: true,
      showHidePositionTool: true,//显示|隐藏定位工具
      addPositionBool: true,
      clearPositionBool: true,
      popupInfoLayer: null,//弹出窗口
      showHideToolsBox: true,
      //addressMatchService:null,//地址匹配
      addressUrl: "https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
      selectFeature: null,//选中要素
      siteVectorLayer: null,//全部活动查询结果图层
      allDataList: [],//全部查询结果数组
      resultLonLatArray: [],//查询经纬度处理结果数组
    }
  },
  watch: {
    allListData: {
      handler: function (newVal, oldVal) {
        this.allDataList = newVal;
        if (newVal != oldVal) {
          this.showAllListData();
        }
      },
      immediate: true
    },
  },
  created() {

  },
  mounted() {
    let that = this;
    //地图异步加载
    this.$nextTick(function () {
      //地图异步加载
      setTimeout(() => {
        //初始化地图信息
        that.initMap();
        //地图显示全部查询结果
        that.showAllListData();
        //test超图服务
        //that.testAllSuperMap();
      }, 200);
    });
  },

  destroyed() {//生命周期销毁完成
    this.map = null;
  },
  activated() {//如果页面有keep-alive缓存功能激活，这个函数会触发
    //自动获取地图div高度
    // this.autodivheight();
    //浏览器窗口发生变化时同时变化DIV高度
    // window.onresize = this.autodivheight;
  },
  deactivated() {//如果页面有keep-alive缓存功能停用，这个函数会触发
    console.log("deactivated-" + this.str);
    //取消浏览器窗口发生变化时同时变化DIV高度事件
    window.onresize = null;
  },
  methods: {
    initMap() {
      let that = this;
      let mapStr = this.str;
      let targetMap = document.getElementById(mapStr + "-map");
      if (targetMap.innerHTML != "") {
        // console.log("清空targetMap");
      }
      targetMap.innerHTML = "";//清空
      //新建popup弹窗
      let targetDiv = document.getElementById(mapStr + "-mapDiv");
      let node = document.createElement("div");
      node.id = mapStr + "-popup";
      node.setAttribute("class", "new-ol-popup");
      node.innerHTML = '<a href="#" id="' + mapStr + '-popup-closer" class="new-ol-popup-closer"></a>' +
        '<div id="' + mapStr + '-popup-content"></div>';
      targetDiv.appendChild(node);
      //自动获取地图div高度
      // this.autodivheight();
      //浏览器窗口发生变化时同时变化DIV高度
      // window.onresize = this.autodivheight;
      if (this.map) {//避免重复加载地图
        return;
      }
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        view: new View({
          center: this.center,
          maxZoom: 18,
          minZoom: 1,
          zoom: this.zoom,
          projection: 'EPSG:4490',
          resolutions: getResolutions()
        })
      });
      //添加天地图图层
      this.layer1 = new TileLayer({
        title: '天地图街道地图底图',
        source: new XYZ({
          crossOrigin: 'Anonymous', // 是否请求跨域操作
          url: 'http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0bfd57475542d76f12578a701d2a70ab',
          projection: getProjection()
        })
      });
      this.map.addLayer(this.layer1);
      this.layer2 = new TileLayer({
        title: '天地图街道地图注记',
        source: new XYZ({
          crossOrigin: 'Anonymous', // 是否请求跨域操作
          url: 'http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0bfd57475542d76f12578a701d2a70ab',
          projection: getProjection()
        })
      });
      this.map.addLayer(this.layer2);
      this.layer1.setZIndex(0);
      this.layer2.setZIndex(0);
      //矢量绘制图层
      this.source = new VectorSource({
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: that.source,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(vectorLayer);
      vectorLayer.setZIndex(1);
      //测量结果图层
      this.measureSource = new VectorSource({
        wrapX: false
      });
      let measureLayer = new VectorLayer({
        source: that.measureSource,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(measureLayer);
      measureLayer.setZIndex(1);

      //全部重大活动图层
      this.siteVectorLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.siteVectorLayer);
      this.siteVectorLayer.setZIndex(4);

      //添加控件
      let info = new Control({ element: document.getElementById(mapStr + '-mapDiv') });
      info.setMap(this.map);
      this.map.addControl(info);
      //弹出窗口
      let popupTarget = document.getElementById(this.str + "-popup");
      if (popupTarget) {
        this.popupInfoLayer = new Overlay({
          element: popupTarget,
          positioning: 'center-center'
        });
        this.map.addOverlay(this.popupInfoLayer);
        //显示弹出窗口
        document.getElementById(this.str + "-popup").style.display = "block";
        //关闭弹出事件
        document.getElementById(this.str + "-popup-closer").onclick = function () {
          that.popupInfoLayer.setPosition(undefined);
          //隐藏弹出窗口
          document.getElementById(that.str + "-popup").style.display = "none";
        };
      }
      //右键菜单事件
      this.map.on('contextmenu', function (event) {
        event.preventDefault();//屏蔽自带的右键事件
        let pixel = that.map.getEventPixel(event.originalEvent);
        let feature = that.map.forEachFeatureAtPixel(pixel, function (feature) {
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if (feature && that.draw == null) {

        }
      });
      //点击地图事件
      this.map.on('click', function (event) {
        //隐藏右键菜单
        that.hideContextMenu();
        //隐藏弹出窗口
        if (that.popupInfoLayer != null) {
          that.popupInfoLayer.setPosition(undefined);
        }
        let pixel = that.map.getEventPixel(event.originalEvent);
        let coordinate = that.map.getEventCoordinate(event.originalEvent);
        //判断定位工具是否开启状态
        if (that.showHidePositionTool == false) {
          document.getElementById(mapStr + "-MousePositionLon").value = coordinate[0];
          document.getElementById(mapStr + "-MousePositionLat").value = coordinate[1];
        }
        let feature = that.map.forEachFeatureAtPixel(pixel, function (feature) {
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if (feature && that.draw == null) {
          //选中要素
          that.selectFeature = feature;
          //活动信息
          let temp = feature.getProperties();
          if (temp.iaId != undefined && temp.iaId != null) {//活动
            console.log("查看活动详情：" + temp.iaId);
            //查看相同行政区划代码的活动数据列表
            that.$emit("getDetailListByCode", temp.iaCode);
          }
        }
      });
      //地图移动事件
      this.map.on('moveend', function (event) {
        let center = that.map.getView().getCenter();
        let zoom = that.map.getView().getZoom();
        if (center[0] != that.center[0] || center[1] != that.center[1] || zoom != that.zoom) {
          //设置主界面图标文字
          that.zoomDefaultPositionBool = false;
        } else {//主界面
          //设置主界面图标文字
          that.zoomDefaultPositionBool = true;
        }
      });
      //鼠标移动事件--测量工具
      this.map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        if (that.measure != null) {
          let helpMsg = '点击开始绘制';
          if (that.sketch) {
            const geom = that.sketch.getGeometry();
            if (geom instanceof Polygon) {
              helpMsg = '点击继续绘制多边形';
            } else if (geom instanceof LineString) {
              helpMsg = '点击继续绘制折线';
            }
          }

          that.helpTooltipElement.innerHTML = helpMsg;
          that.helpTooltip.setPosition(evt.coordinate);
          that.helpTooltipElement.classList.remove('hidden');
        }
      });
      //鼠标移出事件--测量工具
      this.map.getViewport().addEventListener('mouseout', function () {
        if (that.measure != null) {
          that.helpTooltipElement.classList.add('hidden');
        }
      });
      //地址匹配
      //this.addressMatchService = new AddressMatchService(this.addressUrl);
      //地图缩放到权限位置
      this.zoomDefaultPosition();
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:658px
      let tempHeight = 864;
      //let mapTempHeight = 658;
      let mapTempHeight = 710;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if (mapHeight < 480) {
        mapHeight = 480;
      }
      //设置地图高度
      document.getElementById(this.str + "-map").style.height = mapHeight + "px";
      //resize事件--刷新地图,确保地图不变形
      if (this.map) {
        this.map.updateSize();
      }
    },
    setPopupContent(temp) {//设置弹窗内容
      let html = "";
      //主键
      let iaId = temp.iaId;
      //活动ID
      let iaNumber = temp.iaNumber;
      //活动名称
      let iaName = temp.iaName;
      //所属省份
      let iaProvince = temp.iaProvince;
      //城市名称
      let iaCity = temp.iaCity;
      //区县名称
      let iaCounties = temp.iaCounties;
      //行政代码
      let iaCode = temp.iaCode;
      //起始时间
      let iaStartingTime = temp.iaStartingTime;
      //终止时间
      let iaFinshTime = temp.iaFinshTime;
      //弹窗内容
      html += "活动ID：" + iaNumber + "<br/>" + "活动名称：" + iaName + "<br/>"
        + "起始时间：" + iaStartingTime + "<br/>" + "终止时间：" + iaFinshTime + "<br/>";

      document.getElementById(this.str + '-popup-content').innerHTML = html;
      //显示弹出窗口
      document.getElementById(this.str + "-popup").style.display = "block";
    },
    getTextFormat(str) {//格式化文本内容
      if (str == null || str == undefined) {
        str = "";
      }
      return str;
    },
    hideContextMenu() {//隐藏右键菜单
      //隐藏右键菜单

    },
    //切换地图
    switchMap() {
      if (this.switchMapBool) {//显示街道图
        this.switchMapBool = false;
        //添加天地图图层
        if (this.layer1 == null) {
          this.layer1 = new TileLayer({
            title: '天地图街道地图底图',
            source: new XYZ({
              crossOrigin: 'Anonymous', // 是否请求跨域操作
              url: 'http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0bfd57475542d76f12578a701d2a70ab',
              projection: "EPSG:4490"
            })
          });
          this.map.addLayer(this.layer1);
        }
        if (this.layer2 == null) {
          this.layer2 = new TileLayer({
            title: '天地图街道地图注记',
            source: new XYZ({
              crossOrigin: 'Anonymous', // 是否请求跨域操作
              url: 'http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0bfd57475542d76f12578a701d2a70ab',
              projection: "EPSG:4490"
            })
          });
          this.map.addLayer(this.layer2);
        }
        //显示街道图
        this.layer1.setVisible(true);
        this.layer2.setVisible(true);
        this.layer3.setVisible(false);
        this.layer4.setVisible(false);
        this.layer1.setZIndex(0);
        this.layer2.setZIndex(0);
      } else {//显示卫星图
        this.switchMapBool = true;
        if (this.layer3 == null) {
          this.layer3 = new TileLayer({
            title: '天地图卫星影像',
            source: new XYZ({
              crossOrigin: 'Anonymous', // 是否请求跨域操作
              url: 'http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0bfd57475542d76f12578a701d2a70ab',
              projection: "EPSG:4490"
            })
          });
          this.map.addLayer(this.layer3);
        }
        if (this.layer4 == null) {
          this.layer4 = new TileLayer({
            title: '天地图卫星影像',
            source: new XYZ({
              crossOrigin: 'Anonymous', // 是否请求跨域操作
              url: 'http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0bfd57475542d76f12578a701d2a70ab',
              projection: "EPSG:4490"
            })
          });
          this.map.addLayer(this.layer4);
        }
        //显示卫星图
        this.layer1.setVisible(false);
        this.layer2.setVisible(false);
        this.layer3.setVisible(true);
        this.layer4.setVisible(true);
        this.layer3.setZIndex(0);
        this.layer4.setZIndex(0);
      }
    },
    //地图缩放到权限位置
    zoomDefaultPosition() {
      //刷新地图,确保地图不变形
      this.map.updateSize();
      this.map.getView().setCenter(this.center);
      this.map.getView().setZoom(this.zoom);
      this.zoomDefaultPositionBool = true;
    },
    //显示工具箱
    showHideToolsBoxDiv() {
      if (this.showHideToolsBox) {
        this.showHideToolsBox = false;
        document.getElementById(this.str + "-ToolsBoxDiv").style.display = "block";
      } else {
        this.showHideToolsBox = true;
        document.getElementById(this.str + "-ToolsBoxDiv").style.display = "none";
      }
      //关闭全部工具
      this.closeAllToolsBox(null);
    },
    //关闭全部工具
    closeAllToolsBox(type) {
      //关闭测量工具
      if (type != "MeasureTool" && this.showHideMeasureTool == false) {
        this.showHideMeasureTool = true;
        let divId = this.str + "-MeasureToolsDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空测量结果
        this.clearMeasure();
        this.clearMeasureBool = true;
      }
      //关闭定位工具
      if (type != "PositionTool" && this.showHidePositionTool == false) {
        this.showHidePositionTool = true;
        let divId = this.str + "-MousePositionDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空定位结果
        this.clearPosition();
      }
    },
    measureToolBox() {//测量工具Div
      let divId = this.str + "-MeasureToolsDiv";
      //关闭全部工具
      this.closeAllToolsBox("MeasureTool");
      if (this.showHideMeasureTool) {
        this.showHideMeasureTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      } else {
        this.showHideMeasureTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    measureDistance() {//测距
      if (this.source != null) {
        //地图工具箱--开启测距
        this.setMapToolBox('MeasureDistance');
        //设置样式
        this.measureDistanceBool = false;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    measureArea() {//测面
      if (this.source != null) {
        //地图工具箱--开启测面
        this.setMapToolBox('MeasureArea');
        //设置样式
        this.measureAreaBool = false;
        this.measureDistanceBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    stopMeasure() {//停止测量
      if (this.source != null) {
        //地图工具箱--停止测量
        this.setMapToolBox('StopMeasure');
        //设置样式
        this.stopMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.clearMeasureBool = true;
      }
    },
    clearMeasure() {//清空测量结果
      if (this.source != null) {
        //地图工具箱--清空测量结果
        this.setMapToolBox('ClearMeasure');
        //设置样式
        this.clearMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
      }
    },
    positionToolBox() {//定位工具Div
      let divId = this.str + "-MousePositionDiv";
      //关闭全部工具
      this.closeAllToolsBox("PositionTool");
      if (this.showHidePositionTool) {
        this.showHidePositionTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      } else {
        this.showHidePositionTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    addPosition() {//添加定位结果
      this.clearPositionBool = true;
      this.addPositionBool = false;
      //添加定位结果
      if (this.source != null) {
        let longitude = document.getElementById(this.str + "-MousePositionLon").value;
        let latitude = document.getElementById(this.str + "-MousePositionLat").value;
        //处理经纬度
        let lonlat = this.getLonLat(longitude, latitude);
        if (lonlat != null) {
          //点
          let featureTmp = new Feature({
            geometry: new Point(lonlat)
          });
          //样式
          let style = this.getPointStyle();
          featureTmp.setStyle(style);
          //设置属性
          featureTmp.setProperties({
            type: "position",
            longitude: longitude,
            latitude: latitude,
          });
          //添加定位点
          this.source.addFeature(featureTmp);
          //居中缩放
          this.map.getView().setCenter(lonlat);
          this.map.getView().setZoom(12);
        }
      }
    },
    clearPosition() {//清空定位结果
      this.clearPositionBool = false;
      this.addPositionBool = true;
      //地图工具箱--清空
      this.setMapToolBox("Clear");
    },
    //地图工具箱
    setMapToolBox(value) {
      let that = this;
      if (value === 'Clear') {//清空
        //清空
        that.source.clear();
        //停止绘制|修改|拖拽|选择
        clearInteraction();
      } else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
        //点|线|面|圆绘制
        //开启绘制
        startDrawInteraction(value, false);
      } else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
        //手绘线|手绘面
        value = value.split("FreeHand")[1];
        //开启绘制
        startDrawInteraction(value, true);
      } else if (value === 'StopDraw') {//停止绘制
        //停止绘制
        stopDrawInteraction();
      } else if (value === 'Snap') {//开启捕捉
        //开启捕捉
        startSnapInteraction();
      } else if (value === 'NotSnap') {//停止捕捉
        //停止捕捉
        stopSnapInteraction();
      } else if (value === 'Modify') {//开启修改
        //开启修改
        startModifyInteraction();
      } else if (value === 'NotModify') {//停止修改
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
      } else if (value === 'Drag') {//开启拖拽
        //开启拖拽
        startDragInteraction();
      } else if (value === 'NotDrag') {//停止拖拽
        //停止拖拽
        stopDragInteraction();
      } else if (value === 'Select') {//开启选择
        //开启选择
        startSelectInteraction();
      } else if (value === 'NotSelect') {//停止选择
        //停止选择
        stopSelectInteraction();
      } else if (value === 'MeasureDistance') {//开启测距
        //开启测距
        startMeasureInteraction('LineString');
      } else if (value === 'MeasureArea') {//开启测面
        //开启测面
        startMeasureInteraction('Polygon');
      } else if (value === 'StopMeasure') {//停止测量（测距|测面）
        //停止测量
        stopMeasureInteraction();
      } else if (value === 'ClearMeasure') {//清空测量结果
        //停止测量
        stopMeasureInteraction();
        //清空测量结果
        clearMeasureResult();
      }

      //停止绘制|修改|拖拽|选择
      function clearInteraction() {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
      }

      //停止捕捉
      function stopSnapInteraction() {
        if (that.snap) {
          that.map.removeInteraction(that.snap);
          that.snap = null;
        }
      }

      //开启捕捉
      function startSnapInteraction() {
        //停止捕捉
        stopSnapInteraction();
        //开启捕捉
        that.snap = new Snap({
          source: that.source
        });
        that.map.addInteraction(that.snap);
      }

      //停止拖拽
      function stopDragInteraction() {
        //停止拖拽
        if (that.drag) {
          that.map.removeInteraction(that.drag);
          that.drag = null;
        }
      }

      //开启拖拽
      function startDragInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止修改
        stopModifyInteraction();
        //开启选择
        startSelectInteraction();
        //停止拖拽
        stopDragInteraction();
        //开启拖拽
        that.drag = new Translate({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.drag);
      }

      //停止修改
      function stopModifyInteraction() {
        //停止修改
        if (that.modify) {
          that.map.removeInteraction(that.modify);
          that.modify = null;
        }
      }

      //开启修改
      function startModifyInteraction() {
        //停止绘制
        stopDrawInteraction();
        //开启选择
        startSelectInteraction();
        //停止修改
        stopModifyInteraction();
        //开启修改
        that.modify = new Modify({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.modify);
      }

      //停止选择
      function stopSelectInteraction() {
        //停止选择
        if (that.select) {
          that.map.removeInteraction(that.select);
          that.select = null;
        }
      }

      //开启选择
      function startSelectInteraction() {
        //停止选择
        stopSelectInteraction();
        //开启选择
        that.select = new Select({
          wrapX: false
        });
        that.map.addInteraction(that.select);
      }

      //停止绘制
      function stopDrawInteraction() {
        //停止绘制
        if (that.draw) {
          that.map.removeInteraction(that.draw);
          that.draw = null;
        }
      }

      //开启绘制
      function startDrawInteraction(type, bool) {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
        if (bool) {//手绘线|手绘面
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20,
            freehand: true
          });
          that.map.addInteraction(that.draw);
        } else {//点|线|面|圆绘制
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20
          });
          that.map.addInteraction(that.draw);
        }
      }

      //计算面积
      function getPolygonArea(polygon) {
        // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
        const area = getArea(polygon, { projection: 'EPSG:4490' })
        let output = Math.round((area / 1000000) * 100) / 100;//平方公里
        return output;
      }

      ////////////////////////////////////////////////////////////////////测量工具箱
      //格式化距离
      function formatLength(line) {
        const length = getLength(line, { projection: 'EPSG:4490' });
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }
        return output;
      }

      //格式化面积
      function formatArea(polygon) {
        const area = getArea(polygon, { projection: 'EPSG:4490' });
        let output;
        if (area > 10000) {
          output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
        }
        return output;
      }

      //创建新的提示tip
      function createHelpTooltip() {
        if (that.helpTooltipElement != null) {
          that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
        }
        that.helpTooltipElement = document.createElement('div');
        that.helpTooltipElement.className = 'ol-tooltip hidden';
        that.helpTooltip = new Overlay({
          element: that.helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        that.map.addOverlay(that.helpTooltip);
      }

      //创建新的测量提示
      function createMeasureTooltip() {
        if (that.measureTooltipElement != null) {
          that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
        }
        that.measureTooltipElement = document.createElement('div');
        that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        that.measureTooltip = new Overlay({
          element: that.measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        that.map.addOverlay(that.measureTooltip);
      }

      //开启测量工具
      function startMeasureInteraction(type) {
        //停止测量工具
        stopMeasureInteraction();

        console.log(type);
        //开启测量工具--绘制
        that.measure = new Draw({
          source: that.measureSource,
          type: type,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)',
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
            }),
          }),
        });
        that.map.addInteraction(that.measure);

        //创建新的测量提示
        createMeasureTooltip();
        //创建新的提示tip
        createHelpTooltip();

        let listener;
        that.measure.on('drawstart', function (evt) {
          //设置sketch
          that.sketch = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = that.sketch.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            that.measureTooltipElement.innerHTML = output;
            that.measureTooltip.setPosition(tooltipCoord);
          });
        });
        //完成测量绘制
        that.measure.on('drawend', function () {
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          that.measureTooltip.setOffset([0, -7]);
          //添加到数组
          that.measureTooltipArray.push(that.helpTooltip);
          //添加到数组
          that.measureTooltipArray.push(that.measureTooltip);
          //清空sketch
          that.sketch = null;
          //清空tooltip
          that.measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
        });
      }

      //停止测量工具
      function stopMeasureInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止测量工具
        if (that.measure) {
          that.map.removeInteraction(that.measure);
          that.measure = null;
          //隐藏提示tip
          that.helpTooltipElement.classList.add('hidden');
          //移除测量提示
          if (that.helpTooltip != null) {
            that.map.removeOverlay(that.helpTooltip);
          }
          if (that.measureTooltip != null) {
            that.map.removeOverlay(that.measureTooltip);
          }
        }
      }

      //清空测量结果
      function clearMeasureResult() {
        if (that.measureSource != null) {
          //清空测量结果
          that.measureSource.clear();
          //清空测量结果提示数组
          if (that.measureTooltipArray.length > 0) {
            for (let i = 0; i < that.measureTooltipArray.length; i++) {
              that.map.removeOverlay(that.measureTooltipArray[i]);
            }
            that.measureTooltipArray = [];
          }
        }
      }
    },
    getPolyonStyle(color) {//多边形样式
      let style = new Style({
        fill: new Fill({//填充样式
          color: "rgba(0,0,0,0)"
        }),
        stroke: new Stroke({//描绘
          width: 2,//宽
          color: color
        })
      });

      return style;
    },
    getPointStyle() {//点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          anchor: [0.5, 1]
        }),
      });

      return style;
    },
    //处理经纬度
    getLonLat(longitude, latitude) {
      let lonlat = null;
      if (longitude != null && latitude != null && longitude != "" && latitude != "") {
        let lon = Number(longitude);
        let lat = Number(latitude);
        if (lon > 0 && lon < 180 && lat > 0 && lat < 90) {
          lonlat = [lon, lat];
        }
      }

      return lonlat;
    },
    //地图显示全部查询结果
    showAllListData() {
      let allDataList = this.allDataList;
      if (allDataList != null && allDataList.length > 0) {
        if (this.siteVectorLayer != null) {
          this.siteVectorLayer.getSource().clear();//清空
          let newVal = this.allDataList;
          let tempCodeArray = [];
          // let code = newVal[i].iaCode;//行政区划code
          if (newVal.length > 0) {
            for (let i = 0; i < newVal.length; i++) {
              let tempcode = newVal[i].iaCode;//行政区划code
              let index = tempCodeArray.indexOf(tempcode);
              if (index == -1) {
                tempCodeArray.push(tempcode);
                this.getAddressLonLatByCode(newVal[i]);//根据code获取行政区划经纬度地址
              }
            }
          }
        }
      } else {
        //清空数据
        if (this.siteVectorLayer != null) {
          if (this.siteVectorLayer.getSource() != null) {
            this.siteVectorLayer.getSource().clear();//清空
          }
        }
      }
    },
    getAddressLonLatByCode(data) {//根据code获取行政区划经纬度地址
      let code = "156" + data.iaCode;//行政区划code
      let that = this;
      //按名称查询行政区划
      //let url = 'https://api.tianditu.gov.cn/administrative?postStr={"searchWord":"'+name+'","searchType":"1","needSubInfo":"false","needAll":"false","needPolygon":"false","needPre":"false"}&tk=ad0a520abd480f45a173115c2a80f723';
      //按code查询行政区划
      let url = 'https://api.tianditu.gov.cn/administrative?postStr={"searchWord":"' + code + '","searchType":"0","needSubInfo":"false","needAll":"false","needPolygon":"false","needPre":"false"}&tk=ad0a520abd480f45a173115c2a80f723';
      //行政区划查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      /**
       * 获取数据后的处理程序
       */
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          let returncode = obj.returncode;
          if (returncode == "100") {//正常查询
            let longitude = obj.data.lnt;
            let latitude = obj.data.lat;
            //处理经纬度
            let lonlat = that.getLonLat(longitude, latitude)
            if (lonlat != null) {
              //点
              let featureTmp = new Feature({
                geometry: new Point(lonlat)
              });
              //样式
              let style = that.getPointStyle();
              featureTmp.setStyle(style);
              //设置属性
              featureTmp.setProperties(data);
              //添加活动
              that.siteVectorLayer.getSource().addFeature(featureTmp);
            }
          }
        }
      };
    },
    //测试全部超图服务
    testAllSuperMap() {

    },
    //地图服务
    queryBySqlMap() {//SQL查询超图地图
      let that = this;
      //SQL查询地图
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      let param = new QueryBySQLParameters({
        queryParams: {
          name: "Capitals@World.1",
          attributeFilter: "SMID < 10"
        }
      });
      new QueryService(url).queryBySQL(param, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    queryByBoundsMap() {//范围查询超图地图
      let that = this;
      //范围
      let polygon = new Polygon([[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]);
      let polygonSource = new VectorSource({
        features: [new Feature(polygon)],
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: polygonSource,
        projection: 'EPSG:4490',
        style: new Style({
          stroke: new Stroke({
            color: 'blue',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        })
      });
      this.map.addLayer(vectorLayer);
      //设置图层叠加顺序
      vectorLayer.setZIndex(1);
      //范围查询地图
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      let param = new QueryByBoundsParameters({
        queryParams: { name: "Capitals@World.1" },
        bounds: polygon.getExtent()
      });
      new QueryService(url).queryByBounds(param, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    queryByGeometryMap() {//几何查询超图地图
      let that = this;
      //多边形区域
      let polygon = new Polygon([[[0, 0], [-30, 0], [-10, 30], [0, 0]]]);
      let polygonSource = new VectorSource({
        features: [new Feature(polygon)],
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: polygonSource,
        projection: 'EPSG:4490',
        style: new Style({
          stroke: new Stroke({
            color: 'red',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        })
      });
      this.map.addLayer(vectorLayer);
      //设置图层叠加顺序
      vectorLayer.setZIndex(1);
      //几何查询地图
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      let param = new QueryByGeometryParameters({
        queryParams: { name: "Capitals@World.1" },
        geometry: polygon
      });
      new QueryService(url).queryByGeometry(param, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    queryByDistanceMap() {//距离查询超图地图
      let that = this;
      //添加查询中心点
      let point = new Point([74, 30]);
      let iconStyle = new Style({
        image: new Icon({
          src: dingweiImg,
          anchor: [0.5, 1]
        }),
      });
      let feature = new Feature(point);
      feature.setStyle(iconStyle);
      let pointSource = new VectorSource({
        features: [feature],
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: pointSource,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(vectorLayer);
      //设置图层叠加顺序
      vectorLayer.setZIndex(1);
      //距离查询地图
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      let param = new QueryByDistanceParameters({
        queryParams: { name: "Capitals@World.1" },
        distance: 10,
        geometry: point
      });
      //创建距离查询实例
      new QueryService(url).queryByDistance(param, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    //数据服务
    queryByIDsData() {//ID查询超图数据
      let that = this;
      //ID查询数据
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
      let idsParam = new GetFeaturesByIDsParameters({
        IDs: [233, 234],
        datasetNames: ["World:Countries"]
      });
      new FeatureService(url).getFeaturesByIDs(idsParam, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    queryBySQLData() {//SQL查询超图数据
      let that = this;
      //SQL查询数据
      //let url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/data-world/rest/data";
      let url = "http://10.13.155.192:8090/iserver/services/map-fxfzypg/rest/maps/district_boundary_province@fxfzypg";
      let sqlParam = new GetFeaturesBySQLParameters({
        queryParameter: {
          //name: "Countries@World",
          //attributeFilter: "SMID = 230"
          name: "district_boundary_province@fxfzypg",
          attributeFilter: "name like '%市'"
        },
        datasetNames: ["World:Countries"]
      });
      new FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
        if (serviceResult.result != undefined) {
          //添加矢量数据
          let features = serviceResult.result.recordsets[0].features.features;
          if (features.length > 0) {
            let featuresArray = [];
            for (let i = 0; i < features.length; i++) {
              let feature = (new GeoJSON()).readFeature(features[i].geometry);
              featuresArray.push(feature);
            }
            let vectorSource = new VectorSource({
              features: featuresArray,
              wrapX: false
            });
            let resultLayer = new VectorLayer({
              source: vectorSource,
              projection: 'EPSG:4490'
            });
            that.map.addLayer(resultLayer);
            //设置图层叠加顺序
            resultLayer.setZIndex(2);
          }
        }
      });
    },
    queryByBoundsData() {//范围查询超图数据
      let that = this;
      //添加查询区域
      let polygon = new Polygon([[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]);
      let polygonSource = new VectorSource({
        features: [new Feature(polygon)],
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: polygonSource,
        projection: 'EPSG:4490',
        style: new Style({
          stroke: new Stroke({
            color: 'red',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        })
      });
      this.map.addLayer(vectorLayer);
      //设置图层叠加顺序
      vectorLayer.setZIndex(1);
      //创建集Bounds查询服务
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
      let boundsParam = new GetFeaturesByBoundsParameters({
        datasetNames: ["World:Capitals"],
        bounds: polygon.getExtent()
      });
      new FeatureService(url).getFeaturesByBounds(boundsParam, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    queryByGeometryData() {//几何查询超图数据
      let that = this;
      //多边形区域
      let polygon = new Polygon([[[0, 0], [-10, 30], [-30, 0], [0, 0]]]);
      let polygonSource = new VectorSource({
        features: [new Feature(polygon)],
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: polygonSource,
        projection: 'EPSG:4490',
        style: new Style({
          stroke: new Stroke({
            color: 'red',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        })
      });
      this.map.addLayer(vectorLayer);
      //设置图层叠加顺序
      vectorLayer.setZIndex(1);
      //几何查询数据
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
      let geometryParam = new GetFeaturesByGeometryParameters({
        datasetNames: ["World:Countries"],
        geometry: polygon,
        spatialQueryMode: "INTERSECT"
      });
      new FeatureService(url).getFeaturesByGeometry(geometryParam, function (serviceResult) {
        console.log("几何查询超图数据结果");
        console.log(serviceResult);
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    queryByBufferData() {//缓冲区查询超图数据
      let that = this;
      //多边形区域
      let polygon = new Polygon([[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]);
      let polygonSource = new VectorSource({
        features: [new Feature(polygon)],
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: polygonSource,
        projection: 'EPSG:4490',
        style: new Style({
          stroke: new Stroke({
            color: 'red',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          })
        })
      });
      this.map.addLayer(vectorLayer);
      //设置图层叠加顺序
      vectorLayer.setZIndex(1);
      //缓冲区查询数据
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";
      let bufferParam = new GetFeaturesByBufferParameters({
        datasetNames: ["World:Capitals"],
        bufferDistance: 30,
        geometry: polygon
      });
      new FeatureService(url).getFeaturesByBuffer(bufferParam, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let vectorSource = new VectorSource({
            features: (new GeoJSON()).readFeatures(serviceResult.result.features),
            wrapX: false
          });
          let resultLayer = new VectorLayer({
            source: vectorSource,
            projection: 'EPSG:4490'
          });
          that.map.addLayer(resultLayer);
          //设置图层叠加顺序
          resultLayer.setZIndex(1);
        }
      });
    },
    //专题图
    createThemeDotDensity() {//点密度专题图
      let that = this;
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      //瓦片地图图层
      this.createMapLayer(url, 0);//根据url和zIndex添加瓦片地图图层
      //点密度专题图
      let themeDotDensity = new ThemeDotDensity({
        dotExpression: "Pop_1994",
        value: 5000000,
        style: new ServerStyle({
          markerSize: 3,
          markerSymbolID: 12
        })
      });
      let themeParameters = new ThemeParameters({
        themes: [themeDotDensity],
        datasetNames: ["Countries"],
        dataSourceNames: ["World"]
      });
      //创建点密度专题图
      new ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let result = serviceResult.result;
          if (result && result.newResourceID) {
            let themeLayer = new TileLayer({
              source: new TileSuperMapRest({
                url: url,
                noWrap: true,
                cacheEnabled: false,
                layersID: result.newResourceID,
                transparent: true
              }),
              projection: 'EPSG:4490'
            });
            that.map.addLayer(themeLayer);
            //设置图层叠加顺序
            themeLayer.setZIndex(2);
          }
        }
      });
    },
    createThemeGraduatedSymbol() {//等级符号专题图
      let that = this;
      //let url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-china400/rest/maps/China";
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      //瓦片地图图层
      this.createMapLayer(url, 0);//根据url和zIndex添加瓦片地图图层
      //等级符号专题图
      let themeGraduatedSymbol = new ThemeGraduatedSymbol({
        expression: "SMAREA",
        baseValue: 3000000000000,
        graduatedMode: GraduatedMode.CONSTANT,
        style: new ThemeGraduatedSymbolStyle({
          positiveStyle: new ServerStyle({
            markerSize: 50,
            markerSymbolID: 0,
            lineColor: new ServerColor(255, 165, 0),
            fillBackColor: new ServerColor(255, 0, 0)
          })
        })
      });
      let themeParameters = new ThemeParameters({
        themes: [themeGraduatedSymbol],
        datasetNames: ["Countries"],
        dataSourceNames: ["World"]
      });
      //创建等级符号专题图
      new ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let result = serviceResult.result;
          if (result && result.newResourceID) {
            let themeLayer = new TileLayer({
              source: new TileSuperMapRest({
                url: url,
                noWrap: true,
                cacheEnabled: false,
                layersID: result.newResourceID,
                transparent: true
              }),
              projection: 'EPSG:4490'
            });
            that.map.addLayer(themeLayer);
            //设置图层叠加顺序
            themeLayer.setZIndex(1);
          }
        }
      });
    },
    createThemeGraph() {//统计专题图
      let that = this;
      let host = (window.isLocal ? window.server : "https://iserver.supermap.io");
      let mapUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
      let url = host + "/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
      //瓦片地图图层
      this.createMapLayer(url, 1);//根据url和zIndex添加瓦片地图图层
      //统计专题图
      let themeGraph = new ThemeGraph({
        items: [
          new ThemeGraphItem({
            caption: "1992-1995人口增长率",
            graphExpression: "Pop_Rate95",
            uniformStyle: new ServerStyle({
              fillForeColor: new ServerColor(92, 73, 234),
              lineWidth: 0.1
            })
          }),
          new ThemeGraphItem({
            caption: "1995-1999人口增长率",
            graphExpression: "Pop_Rate99",
            uniformStyle: new ServerStyle({
              fillForeColor: new ServerColor(211, 111, 240),
              lineWidth: 0.1
            })
          })
        ],
        barWidth: 0.03,
        graduatedMode: GraduatedMode.SQUAREROOT,
        graphAxes: new ThemeGraphAxes({
          axesDisplayed: true
        }),
        graphSize: new ThemeGraphSize({
          maxGraphSize: 1,
          minGraphSize: 0.35
        }),
        graphText: new ThemeGraphText({
          graphTextDisplayed: true,
          graphTextFormat: ThemeGraphTextFormat.VALUE,
          graphTextStyle: new ServerTextStyle({
            sizeFixed: true,
            fontHeight: 9,
            fontWidth: 5
          })
        }),
        graphType: ThemeGraphType.BAR3D
      });
      let themeParameters = new ThemeParameters({
        themes: [themeGraph],
        dataSourceNames: ["Jingjin"],
        datasetNames: ["BaseMap_R"]
      });

      let extent = [114.59, 37.76, 119.51, 42.31];
      //创建统计专题图
      new ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
        if (serviceResult.result != undefined) {
          let result = serviceResult.result;
          if (result && result.newResourceID) {
            let themeLayer = new TileLayer({
              source: new TileSuperMapRest({
                url: url,
                noWrap: true,
                cacheEnabled: false,
                layersID: result.newResourceID,
                transparent: true,
                /*tileGrid: new TileGrid({
                  extent: extent,
                  resolutions: options.tileGrid.getResolutions()
                }),*/
              }),
              projection: 'EPSG:4490'
            });
            that.map.addLayer(themeLayer);
            //设置图层叠加顺序
            themeLayer.setZIndex(1);
          }
        }
      });
    },
    createThemeLabel() {//标签专题图
      let that = this;
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      //瓦片地图图层
      this.createMapLayer(url, 0);//根据url和zIndex添加瓦片地图图层
      //标签专题图
      let style1, style2, style3;
      style1 = new ServerTextStyle({
        fontHeight: 4,
        foreColor: new ServerColor(100, 20, 50),
        sizeFixed: true,
        bold: true

      });
      style2 = new ServerTextStyle({
        fontHeight: 4,
        foreColor: new ServerColor(250, 0, 0),
        sizeFixed: true,
        bold: true
      });
      style3 = new ServerTextStyle({
        fontHeight: 4,
        foreColor: new ServerColor(93, 95, 255),
        sizeFixed: true,
        bold: true
      });
      let themeLabelItem1, themeLabelItem2, themeLabelItem3, themeLabelItem4, themeLabelItem5, themeLabelItem6;
      themeLabelItem1 = new ThemeLabelItem({
        start: 0.0,
        end: 7800000,
        style: style1
      });
      themeLabelItem2 = new ThemeLabelItem({
        start: 7800000,
        end: 15000000,
        style: style2
      });
      themeLabelItem3 = new ThemeLabelItem({
        start: 15000000,
        end: 30000000,
        style: style3
      });
      themeLabelItem4 = new ThemeLabelItem({
        start: 0.0,
        end: 55,
        style: style1
      });
      themeLabelItem5 = new ThemeLabelItem({
        start: 55,
        end: 109,
        style: style2
      });
      themeLabelItem6 = new ThemeLabelItem({
        start: 109,
        end: 300,
        style: style3
      });

      let themeLabel = new ThemeLabel({
        matrixCells: [
          [new LabelThemeCell({
            themeLabel: new ThemeLabel({
              labelExpression: "CAPITAL",
              rangeExpression: "SmID",
              numericPrecision: 0,
              items: [themeLabelItem4, themeLabelItem5, themeLabelItem6]
            })
          })],
          [new LabelThemeCell({
            themeLabel: new ThemeLabel({
              labelExpression: "CAP_POP",
              rangeExpression: "CAP_POP",
              numericPrecision: 0,
              items: [themeLabelItem1, themeLabelItem2, themeLabelItem3]
            })
          })]
        ],
        background: new ThemeLabelBackground({
          backStyle: new ServerStyle({
            fillForeColor: new ServerColor(179, 209, 193),
            fillOpaqueRate: 60,
            lineWidth: 0.1
          }),
          labelBackShape: "RECT"
        })
      });
      let themeParameters = new ThemeParameters({
        themes: [themeLabel],
        datasetNames: ["Capitals"],
        dataSourceNames: ["World"]
      });
      //创建标签专题图
      new ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
        console.log("标签专题图");
        console.log(serviceResult);
        if (serviceResult.result != undefined) {
          let result = serviceResult.result;
          if (result && result.newResourceID) {
            let themeLayer = new TileLayer({
              source: new TileSuperMapRest({
                url: url,
                noWrap: true,
                cacheEnabled: false,
                layersID: result.newResourceID,
                transparent: true
              }),
              projection: 'EPSG:4490'
            });
            that.map.addLayer(themeLayer);
            //设置图层叠加顺序
            themeLayer.setZIndex(1);
          }
        }
      });
    },
    createThemeRange() {//分段专题图
      let that = this;
      //let url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-china400/rest/maps/China";
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World";
      //瓦片地图图层
      this.createMapLayer(url, 0);//根据url和zIndex添加瓦片地图图层
      //分段专题图
      let themeRangeItem1, themeRangeItem2, themeRangeItem3, themeRange;
      themeRangeItem1 = new ThemeRangeItem({
        start: 0,
        end: 500000000000,
        style: new ServerStyle({
          fillForeColor: new ServerColor(211, 255, 250),
          lineColor: new ServerColor(179, 209, 193),
          lineWidth: 0.1
        })
      });
      themeRangeItem2 = new ThemeRangeItem({
        start: 500000000000,
        end: 1000000000000,
        style: new ServerStyle({
          fillForeColor: new ServerColor(178, 218, 199),
          lineColor: new ServerColor(179, 209, 193),
          lineWidth: 0.1
        })
      });
      themeRangeItem3 = new ThemeRangeItem({
        start: 1000000000000,
        end: 3000000000000,
        style: new ServerStyle({
          fillForeColor: new ServerColor(58, 178, 166),
          lineColor: new ServerColor(179, 209, 193),
          lineWidth: 0.1
        })
      });
      themeRange = new ThemeRange({
        rangeExpression: "SMAREA",
        rangeMode: RangeMode.EQUALINTERVAL,
        items: [themeRangeItem1, themeRangeItem2, themeRangeItem3]
      });
      let themeParameters = new ThemeParameters({
        datasetNames: ["Countries"],
        dataSourceNames: ["World"],
        joinItems: null,
        themes: [themeRange]
      });
      //创建分段专题图
      new ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
        console.log("分段专题图");
        console.log(serviceResult);
        if (serviceResult.result != undefined) {
          let result = serviceResult.result;
          if (result && result.newResourceID) {
            let themeLayer = new TileLayer({
              source: new TileSuperMapRest({
                url: url,
                noWrap: true,
                cacheEnabled: false,
                layersID: result.newResourceID,
                transparent: true
              }),
              projection: 'EPSG:4490'
            });
            that.map.addLayer(themeLayer);
            //设置图层叠加顺序
            themeLayer.setZIndex(1);
          }
        }
      });
    },
    createThemeUnique() {//单值专题图
      let that = this;
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China";
    },
    createThemeGridRange() {//栅格分段专题图
      let that = this;
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
      //瓦片地图图层
      this.createMapLayer(url, 0);//根据url和zIndex添加瓦片地图图层
      //栅格分段专题图
      let themeGridRangeItem1 = new ThemeGridRangeItem({
        start: -4,
        end: 120,
        color: new ServerColor(198, 244, 240)
      }),
        themeGridRangeItem2 = new ThemeGridRangeItem({
          start: 120,
          end: 240,
          color: new ServerColor(176, 244, 188)
        }),
        themeGridRangeItem3 = new ThemeGridRangeItem({
          start: 240,
          end: 360,
          color: new ServerColor(218, 251, 178)
        }),
        themeGridRangeItem4 = new ThemeGridRangeItem({
          start: 360,
          end: 480,
          color: new ServerColor(220, 236, 145)
        }),
        themeGridRangeItem5 = new ThemeGridRangeItem({
          start: 480,
          end: 600,
          color: new ServerColor(96, 198, 66)
        }),
        themeGridRangeItem6 = new ThemeGridRangeItem({
          start: 600,
          end: 720,
          color: new ServerColor(20, 142, 53)
        }),
        themeGridRangeItem7 = new ThemeGridRangeItem({
          start: 720,
          end: 840,
          color: new ServerColor(85, 144, 55)
        }),
        themeGridRangeItem8 = new ThemeGridRangeItem({
          start: 840,
          end: 960,
          color: new ServerColor(171, 168, 38)
        }),
        themeGridRangeItem9 = new ThemeGridRangeItem({
          start: 960,
          end: 1100,
          color: new ServerColor(235, 165, 9)
        }),
        themeGridRangeItem10 = new ThemeGridRangeItem({
          start: 1100,
          end: 1220,
          color: new ServerColor(203, 89, 2)
        }),
        themeGridRangeItem11 = new ThemeGridRangeItem({
          start: 1220,
          end: 1340,
          color: new ServerColor(157, 25, 1)
        }),
        themeGridRangeItem12 = new ThemeGridRangeItem({
          start: 1340,
          end: 1460,
          color: new ServerColor(118, 15, 3)
        }),
        themeGridRangeItem13 = new ThemeGridRangeItem({
          start: 1460,
          end: 1600,
          color: new ServerColor(112, 32, 7)
        }),
        themeGridRangeItem14 = new ThemeGridRangeItem({
          start: 1600,
          end: 1800,
          color: new ServerColor(106, 45, 12)
        }),
        themeGridRangeItem15 = new ThemeGridRangeItem({
          start: 1800,
          end: 2000,
          color: new ServerColor(129, 80, 50)
        }),
        themeGridRangeItem16 = new ThemeGridRangeItem({
          start: 2000,
          end: 2167,
          color: new ServerColor(160, 154, 146)
        });
      let themeGridRange = new ThemeGridRange({
        reverseColor: false,
        rangeMode: RangeMode.EQUALINTERVAL,
        items: [
          themeGridRangeItem1, themeGridRangeItem2,
          themeGridRangeItem3, themeGridRangeItem4,
          themeGridRangeItem5, themeGridRangeItem6,
          themeGridRangeItem7, themeGridRangeItem8,
          themeGridRangeItem9, themeGridRangeItem10,
          themeGridRangeItem11, themeGridRangeItem12,
          themeGridRangeItem13, themeGridRangeItem14,
          themeGridRangeItem15, themeGridRangeItem16
        ]
      });
      let themeParameters = new ThemeParameters({
        datasetNames: ["JingjinTerrain"],
        dataSourceNames: ["Jingjin"],
        joinItems: null,
        themes: [themeGridRange]
      });

      let extent = [114.59, 37.76, 119.51, 42.31];
      //创建栅格分段专题图
      new ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
        console.log("栅格分段专题图");
        console.log(serviceResult);
        if (serviceResult.result != undefined) {
          let result = serviceResult.result;
          if (result && result.newResourceID) {
            let themeLayer = new TileLayer({
              source: new TileSuperMapRest({
                url: url,
                noWrap: true,
                cacheEnabled: false,
                layersID: result.newResourceID,
                transparent: true,
                /*tileGrid: new TileGrid({
                  extent: extent,
                  resolutions: options.tileGrid.getResolutions()
                }),*/
              }),
              projection: 'EPSG:4490'
            });
            that.map.addLayer(themeLayer);
            //设置图层叠加顺序
            themeLayer.setZIndex(1);
          }
        }
      });
    },
    createThemeGridUnique() {//栅格单值专题图
      let that = this;
      let url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
      //瓦片地图图层
      this.createMapLayer(url, 0);//根据url和zIndex添加瓦片地图图层
      //栅格单值专题图样式
      function setItems() {
        let items = [],
          color0 = new ServerColor(198, 244, 240),
          color1 = new ServerColor(176, 244, 188),
          color2 = new ServerColor(218, 251, 178),
          color3 = new ServerColor(220, 236, 145),
          color4 = new ServerColor(96, 198, 66),
          color5 = new ServerColor(20, 142, 53),
          color6 = new ServerColor(85, 144, 55),
          color7 = new ServerColor(171, 168, 38),
          color8 = new ServerColor(235, 165, 9),
          color9 = new ServerColor(203, 89, 2),
          color10 = new ServerColor(157, 25, 1),
          color11 = new ServerColor(118, 15, 3),
          color12 = new ServerColor(112, 32, 7),
          color13 = new ServerColor(106, 45, 12),
          color14 = new ServerColor(129, 80, 50),
          color15 = new ServerColor(160, 154, 146);
        for (let i = -4; i < 2197; i++) {
          let num = parseInt(i / 135);
          let item = new ThemeGridUniqueItem();
          item.caption = 1;
          item.unique = i;
          item.visible = true;
          switch (num) {
            case 0:
              item.color = color0;
              break;
            case 1:
              item.color = color1;
              break;
            case 2:
              item.color = color2;
              break;
            case 3:
              item.color = color3;
              break;
            case 4:
              item.color = color4;
              break;
            case 5:
              item.color = color5;
              break;
            case 6:
              item.color = color6;
              break;
            case 7:
              item.color = color7;
              break;
            case 8:
              item.color = color8;
              break;
            case 9:
              item.color = color9;
              break;
            case 10:
              item.color = color10;
              break;
            case 11:
              item.color = color11;
              break;
            case 12:
              item.color = color12;
              break;
            case 13:
              item.color = color13;
              break;
            case 14:
              item.color = color14;
              break;
            case 15:
              item.color = color15;
              break;
            default:
              item.color = color0;
              break;
          }
          items.push(item);
        }
        return items;
      }
      //栅格单值专题图
      let themeGridUnique = new ThemeGridUnique({
        defaultcolor: new ServerColor(0, 0, 0),
        items: setItems()
      });
      let themeParameters = new ThemeParameters({
        datasetNames: ["JingjinTerrain"],
        dataSourceNames: ["Jingjin"],
        themes: [themeGridUnique]
      });

      let extent = [114.59, 37.76, 119.51, 42.31];
      new ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
        console.log("栅格单值专题图");
        console.log(serviceResult);
        if (serviceResult.result != undefined) {
          let result = serviceResult.result;
          if (result && result.newResourceID) {
            let themeLayer = new TileLayer({
              source: new TileSuperMapRest({
                url: url,
                noWrap: true,
                cacheEnabled: false,
                transparent: true,
                layersID: result.newResourceID,
                /*tileGrid: new ol.tilegrid.TileGrid({
                  extent: extent,
                  resolutions: options.tileGrid.getResolutions()
                }),*/
              }),
              projection: 'EPSG:4490'
            });
            that.map.addLayer(themeLayer);
            //设置图层叠加顺序
            themeLayer.setZIndex(1);
          }
        }
      });
    },
    createMapLayer(url, zIndex) {//根据REST图层url和zIndex添加瓦片地图图层WMTS
      let that = this;
      //瓦片地图图层
      let mapService = new MapService(url);//根据超图REST图层获取图层信息
      mapService.getMapInfo(function (serviceResult) {
        console.log("瓦片地图图层");
        console.log(serviceResult);
        if (serviceResult.result != undefined) {
          let mapJSONObj = serviceResult.result;
          console.log("mapJSONObj");
          console.log(mapJSONObj);
          /*
          //获取超图发布的REST图层
          let options = TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
          let layer = new TileLayer({
            source: new TileSuperMapRest(options),
            projection: getProjection()
          });
          that.map.addLayer(layer);
          //设置图层叠加顺序
          layer.setZIndex(zIndex);
          */
          //超图发布的WMTS图层（自定义比例尺）URL
          let wmtsUrl = 'http://10.13.155.192:8090/iserver/services/map-fxfzypg/wmts-fxpc';
          let layerName = mapJSONObj.name;//图层名称
          //获取图层范围
          let bounds = mapJSONObj.bounds;
          let left = bounds.left;
          let bottom = bounds.bottom;
          let right = bounds.right;
          let top = bounds.top;
          let origin = [left, top];//左上角
          let extent = [left, bottom, right, top];//图层范围
          //获取超图发布的WMTS图层（自定义比例尺）
          let layer = getWMTSLayer(wmtsUrl, layerName, origin, extent);
          that.map.addLayer(layer);
          //设置图层叠加顺序
          layer.setZIndex(zIndex);
        }
      });
    },
    createMapRestLayer(layerUrl, layerID, zIndex) {//根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
      let that = this;
      //瓦片地图图层
      let mapService = new MapService(layerUrl);//根据超图REST图层获取图层信息
      mapService.getMapInfo(function (serviceResult) {
        console.log("瓦片地图图层");
        console.log(serviceResult);
        if (serviceResult.result != undefined) {
          let mapJSONObj = serviceResult.result;
          console.log("mapJSONObj");
          console.log(mapJSONObj);
          //获取超图发布的REST图层
          //let options = TileSuperMapRest.optionsFromMapJSON(layerUrl, mapJSONObj);
          let layerName = mapJSONObj.name;//图层名称
          //获取图层范围
          let bounds = mapJSONObj.bounds;
          let left = bounds.left;
          let bottom = bounds.bottom;
          let right = bounds.right;
          let top = bounds.top;
          let origin = [left, top];//左上角
          let extent = [left, bottom, right, top];//图层范围
          //获取超图发布的REST图层（自定义比例尺）
          let layer = getRESTLayer(layerUrl, layerID, origin, extent);
          that.map.addLayer(layer);
          //设置图层叠加顺序
          layer.setZIndex(zIndex);
        }
      });
    },
    //临时图层SQL查询更新并获取瓦片图层REST
    deleteRestMapTempLayersSet(layerUrl, layerID) {//删除超图临时图层
      let that = this;
      let url = encodeURI(layerUrl + "/tempLayersSet.rjson");
      //查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      //获取数据后的处理程序
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          if (obj.length > 0) {
            for (let i = 0; i < obj.length; i++) {
              let path = obj[i].path;
              if (layerID != null && layerID != "") {//指定临时图层ID
                if (obj[i].name == layerID) {
                  that.deleteTempLayersSet(path);//删除超图临时图层
                  break;
                }
              } else {//全部临时图层
                that.deleteTempLayersSet(path);//删除超图临时图层
              }
            }
          }
        }
      };
    },
    deleteTempLayersSet(url) {//删除超图临时图层
      url = encodeURI(url);
      let xhr = new XMLHttpRequest();//第一步：建立所需的对象
      xhr.open("DELETE", url, true);//第二步：打开连接  将请求参数写在url中
      xhr.send();//第三步：发送请求  将请求参数写在URL中
      // 获取数据后的处理程序
      xhr.onreadystatechange = function () {
        let readyState = xhr.readyState;
        if (readyState == 4) {
          let status = xhr.status;
          let responseText = xhr.responseText;
          let result = JSON.parse(responseText);
          console.log("deleteResult");
          console.log(result);
          if (result.succeed) {
            //that.$message({ message: '删除临时图层成功!', type: 'success' });
          } else {
            //that.$message({ message: '删除临时图层失败!', type: 'warning' });
          }
          xhr.onreadystatechange = function () { };
          xhr = null;
        }
      };
    },
    createRestMapTempLayersSet(layerUrl, zIndex, sqlText) {//查询REST图层信息并创建新的临时图层
      let url = encodeURI(layerUrl + "/layers.rjson");
      let that = this;
      //查询REST图层信息
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      //获取数据后的处理程序
      httpRequest.onreadystatechange = function () {
        console.log(httpRequest);
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          if (obj.length > 0) {
            if (sqlText != null && sqlText != "") {
              for (let i = 0; i < obj.length; i++) {
                let layers = obj[i].subLayers.layers;
                for (let j = 0; j < layers.length; j++) {
                  layers[j].displayFilter = sqlText;//SQL查询过滤
                }
              }
            }
            that.postTempLayersSet(layerUrl, zIndex, obj);//创建并获取超图临时图层
          }
        }
      };
    },
    postTempLayersSet(layerUrl, zIndex, obj) {//创建并获取超图临时图层
      let that = this;
      let url = encodeURI(layerUrl + "/tempLayersSet.rjson");
      let entry = JSON.stringify(obj);
      let xhr = new XMLHttpRequest();//第一步：建立所需的对象
      xhr.open("POST", url, true);//第二步：打开连接  将请求参数写在url中
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
      //获取数据后的处理程序
      xhr.onreadystatechange = function () {
        let readyState = xhr.readyState;
        if (readyState == 4) {
          let status = xhr.status;
          let responseText = xhr.responseText;
          let result = JSON.parse(responseText);
          if (result.succeed) {
            let layerID = result.newResourceID;
            let newResourceLocation = result.newResourceLocation;
            //that.$message({ message: '创建临时图层成功!', type: 'success' });
            //查询超图临时图层
            //that.getMapTempLayer(layerUrl,layerID,zIndex);
            //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
            that.createMapRestLayer(layerUrl, layerID, zIndex);
          } else {
            //that.$message({ message: '创建临时图层失败!', type: 'warning' });
          }
          xhr.onreadystatechange = function () { };
          xhr = null;
        }
      };
      xhr.send(entry);//第三步：发送请求  将请求参数写在URL中
    },
    getMapTempLayer(layerUrl, layerID, zIndex) {//查询超图临时图层
      let that = this;
      let url = encodeURI(layerUrl + "/tempLayersSet.rjson");
      //查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      //获取数据后的处理程序
      httpRequest.onreadystatechange = function () {
        console.log(httpRequest);
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          if (obj.length > 0) {
            if (layerID != null && layerID != "") {
              for (let i = 0; i < obj.length; i++) {
                if (obj[i].name == layerID) {
                  //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
                  that.createMapRestLayer(layerUrl, layerID, zIndex);
                  break;
                }
              }
            } else {
              layerID = obj[0].name;//默认取第一个
              //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
              that.createMapRestLayer(layerUrl, layerID, zIndex);
            }
            that.$message({ message: '查询成功!', type: 'success' });
          } else {
            that.$message({ message: '无查询结果!', type: 'warning' });
          }
        }
      };
    },
    queryTempLayersSetBySql(layerUrl, zIndex, sqlText) {//根据SQL条件筛选更新并查询超图临时图层信息
      let that = this;
      let url = encodeURI(layerUrl + "/tempLayersSet.rjson");
      //查询
      let httpRequest = new XMLHttpRequest();
      httpRequest.open('GET', url, true);
      httpRequest.send();
      //获取数据后的处理程序
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          if (obj.length > 0) {
            //let tempUrl = obj[0].path;
            let layerID = obj[0].name;//默认选第一个临时图层
            console.log("layerID");
            console.log(layerID);
            //更新超图临时图层信息
            that.getPutTempLayersSet(layerUrl, layerID, zIndex, sqlText);
          }
        }
      };
    },
    getPutTempLayersSet(layerUrl, layerID, zIndex, sqlText) {//更新超图临时图层信息
      let that = this;
      //查询
      let url = encodeURI(layerUrl + "/tempLayersSet/" + layerID + ".rjson");
      //查询
      let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
      httpRequest.open('GET', url, true);//第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send();//第三步：发送请求  将请求参数写在URL中
      //获取数据后的处理程序
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          let json = httpRequest.responseText;//获取到json字符串，还需解析
          let obj = JSON.parse(json);
          if (obj.length > 0) {
            for (let i = 0; i < obj.length; i++) {
              let layers = obj[i].subLayers.layers;
              for (let j = 0; j < layers.length; j++) {
                layers[j].displayFilter = sqlText;//SQL查询过滤
              }
            }
          }
          //更新超图临时图层信息
          that.putTempLayersSet(url, layerUrl, layerID, zIndex, obj);
        }
      };
    },
    putTempLayersSet(url, layerUrl, layerID, zIndex, obj) {//更新超图临时图层信息，获取临时图层
      let that = this;
      let entry = JSON.stringify(obj);
      let xhr = new XMLHttpRequest();//第一步：建立所需的对象
      xhr.open("PUT", url, true);//第二步：打开连接  将请求参数写在url中
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
      //获取数据后的处理程序
      xhr.onreadystatechange = function () {
        let readyState = xhr.readyState;
        if (readyState == 4) {
          let status = xhr.status;
          let responseText = xhr.responseText;
          let result = JSON.parse(responseText);
          if (result.succeed) {
            //that.$message({ message: '更新临时图层成功!', type: 'success' });
            //查询超图临时图层
            //that.getMapTempLayer(layerUrl,layerID,zIndex);
            //根据layerUrl、临时图层layerID和zIndex查询并添加瓦片地图图层REST
            that.createMapRestLayer(layerUrl, layerID, zIndex);
          } else {
            //that.$message({ message: '更新临时图层失败!', type: 'warning' });
          }
          xhr.onreadystatechange = function () { };
          xhr = null;
        }
      };
      xhr.send(entry);//第三步：发送请求  将请求参数写在URL中
    },
  }
}

</script>

<style scoped></style>